<template>

  <el-dialog
    class="abow_dialog"
    :close-on-click-modal="false"
    :append-to-body="true"
    :modal-append-to-body="appendToBody"
    title="列设置"
    width="75%"
    top="10vh"
    :visible.sync="visible"
    :show="busChildShow"
    @close="$emit('update:busChildShow', false)"
  >
    <div>
      <el-form :inline="true" :model="queryForm">
        <el-form-item label=" 业务表别名">
          <el-input v-model="queryForm.modelName" />
        </el-form-item>
        <el-form-item label="表名">
          <el-input v-model="queryForm.tableName" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="default" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <Row>

        <Col span="17" class="no-padding border-bottom border-right boder-margin">
          <Table
            ref="selection"
            border
            highlight-row
            height="450"
            :columns="tableColumns"
            :data="tableData"
            style="padding-left: 10px;padding-top: 10px"
            @on-select-cancel="cancelSelectionChange"

            @on-select="selectionOnChange"
            @on-select-all="selectAll"
            @on-select-all-cancel="selectAllCancel"
          />
          <Page ref="pages" :total="userTotal" show-elevator style="margin-top: 3px" @on-change="changePanelUser" />
          <!--          @on-change="changePanelUser"-->
        </Col>
        <Col
          span="5"
          class="border-right border"
          style="padding-left: 10px;margin-left: 10px"
          :style="{ 'min-height': tableMinHeight+'px' }"
        >

          <Table
            ref="showTable"
            border
            highlight-row
            style="padding-top: 10px"
            height="450"
            :columns="showTableColumns"
            :data="showTableData"
          />
        </Col>
      </Row>

    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirmDialog">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>

    </span>
  </el-dialog>
</template>

<script>
import { getBusinessTableListJson } from '@/api/form'

export default {
  props: {
    busChildShow: {
      type: Boolean,
      default: false
    },
    onOk: { // 定义onOK属性
      type: Function
    },
    existData: Array,
    nodeIndex: {
      type: Number,
      default: 0
    },
    alias: {
      type: String,
      default: 'agree'
    }
  },
  data() {
    return {
      visible: this.show,
      appendToBody: false,
      curentTableData: [],
      index: 1,
      roleDefaultProps: {
        children: 'childList',
        label: 'name'
      },
      orgDefaultProps: {
        children: 'children',
        label: 'deptName'
      },
      positionDefaultProps: {
        children: 'children',
        label: 'posName'
      },
      activiteCode: '',
      serviceVal: '',
      activePanel: '',
      tableHeight: 420,
      tableMinHeight: 484,
      userTotal: 0,
      currentChoose: '',
      orgModel: '',
      positionModel: '',
      roleData: [],
      orgData: [],
      positionDemension: [],
      orgDemension: [],
      queryForm: {
        page: 1,
        length: 10,
        modelName: '',
        tableName: ''
      },
      showTableColumns: [
        {
          title: '描述',
          key: 'description'
        },
        {
          title: '操作', //
          key: 'id', //
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  icon: 'ivu-icon-ios-trash'
                },
                style: {
                  display: 'flex',
                  'justify-content': 'center'
                },
                on: {
                  click: (index, data) => {
                    if (this.showTableData) {
                      this.showTableData.splice(params.index, 1)
                      this.$nextTick(() => {
                        var objData = this.$refs.selection.$refs.tbody.objData
                        var leftData = []
                        for (var obj in objData) {
                          leftData.push(objData[obj])
                        }
                        for (var i = 0; i < leftData.length; i++) {
                          // eslint-disable-next-line eqeqeq
                          if (leftData[i].id == params.row.id) {
                            this.$refs.selection.$refs.tbody.objData[i]._isChecked = false

                            break
                          }
                        }
                      })
                    }
                  }
                }
              }, '删除')
            ])
          }
        }
      ],

      tableColumns: [
        {
          type: 'selection',
          width: 70,
          align: 'center'
        },

        {
          title: '名称',
          key: 'modelName'
        },
        {
          title: '表名',
          key: 'tableName'
        },
        {
          title: '描述',
          key: 'description'
        },
        {
          title: '分类',
          key: 'groupName'
        },
        {
          title: '类型',
          key: 'type'
        }
      ],
      tableData: [],
      showTableData: []
    }
  },
  watch: {
    busChildShow() {
      // 分页初始化为第一页
      this.$nextTick(function() {
        this.$refs['pages'].currentPage = 1
      })
      if (this.busChildShow) {
        this.showTableData = this.existData
        this.getAllUser()
        this.visible = this.busChildShow
        this.index = this.nodeIndex
      } else {
        this.resetQuery()
      }
    }
  },
  methods: {
    mount() {
    },
    created() {
    },
    resetQuery: function() {
      this.queryForm.modelName = ''
      this.queryForm.tableName = ''
      this.queryForm.page = 1
    },
    reset: function() {
      this.resetQuery()
      this.getAllUser()
    },
    search: function() {
      this.getAllUser()
    },
    changePanelUser: function(page) {
      this.queryForm.page = page
      this.getAllUser()
    },
    cancelSelectionChange: function(selection, row) {
      var existData = this.remove(row.id)
      this.showTableData = existData
    },
    operateTable: function(selection) {
      var array = this.showTableData.concat(selection)
      var newArray = this.unique(array)
      this.showTableData = newArray
    },
    selectionOnChange: function(selection, row) {
      this.operateTable(selection)
    },
    unique(arr) { // 根据唯一标识no来对数组进行过滤
      const res = new Map() // 定义常量 res,值为一个Map对象实例
      // 返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return arr.filter((arr) => !res.has(arr.tableName) && res.set(arr.tableName, 1))
    },
    remove(id) { // 根据唯一标识no来对数组进行过滤
      // eslint-disable-next-line no-unused-vars
      const res = new Map() // 定义常量 res,值为一个Map对象实例
      // 返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      // eslint-disable-next-line no-undef
      // eslint-disable-next-line eqeqeq
      // eslint-disable-next-line no-undef
      return this.showTableData.filter((arr) => !(tableName.id === id))
    },
    exist(tableName) { // 根据唯一标识no来对数组进行过滤
      if (this.showTableData) {
        // eslint-disable-next-line eqeqeq
        return this.showTableData.filter((arr) => (arr.tableName == tableName))
      }
    },

    selectAll: function(selection) {
      this.operateTable(selection)
      this.curentTableData = selection
    },
    selectAllCancel: function(selection, row) {
      var select = this.$refs.selection.data
      if (select) {
        for (var i = 0; i < select.length; i++) {
          this.showTableData = this.remove(select[i].id)
        }
      }
    },
    getAllUser: function() {
      getBusinessTableListJson(this.queryForm).then((response) => {
        // eslint-disable-next-line eqeqeq
        if (response.code == 0) {
          this.tableData = response.data

          this.userTotal = parseInt(response.count)
          this.$nextTick(() => {
            var objData = this.$refs.selection.$refs.tbody.objData
            var leftData = []
            for (var obj in objData) {
              leftData.push(objData[obj])
            }
            if (leftData) {
              for (var i = 0; i < leftData.length; i++) {
                if (this.exist(leftData[i].tableName) && this.exist(leftData[i].tableName).length > 0) {
                  this.$refs.selection.$refs.tbody.objData[i]._isChecked = true
                }
              }
            }
          })
        }
      })
    },
    confirmDialog() {
      if (this.onOk) {
        this.visible = false
        this.onOk(this.showTableData)
      }
    },
    changePanel: function(data) {
    }
  },
  mount() {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
  }
}
</script>
<style lang="scss">

</style>
